<script setup lang="ts">
const props = defineProps({
  showData: {
    type: Array as PropType<showDataImpl[]>,
    required: false,
    default: [],
  },
  loading: {
    type: Boolean,
    required: false,
    default: false,
  },
});

interface showDataImpl {
  name: string;
  values: string[];
}

const isNoData = ref<boolean>(false);
const isHoverTable = ref<boolean>(false);

function handleMouseOver(event: MouseEvent) {
  isHoverTable.value = true;
}

function handleMouseOut(event: MouseEvent) {
  isHoverTable.value = false;
}

watch(
  () => props.showData,
  () => {
    isNoData.value = props.showData.length == 0;
  },
  { deep: true }
);

//组件挂载成功
onMounted(() => {
  isNoData.value = props.showData.length == 0;
});
</script>

<template>
  <div class="container">
    <table
      :class="{
        'scrollable-table': true,
        'scrollable-table--nodata': isNoData,
        'scrollable-table--hover': isHoverTable,
      }"
      @mouseover="handleMouseOver"
      @mouseout="handleMouseOut"
      v-if="!loading"
    >
      <tr v-for="column in props.showData" :key="column.name">
        <th>{{ column.name }}</th>
        <td v-for="value in column.values" :key="value">{{ value }}</td>
      </tr>
    </table>
    <TableLoading1 v-if="loading" />
  </div>
</template>

<style scoped>
.container {
  position: relative;
  display: flex;
  align-content: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.scrollable-table {
  max-width: 900px; /* 根据需要设置最大宽度 */
  max-height: 150px; /* 根据需要设置最大高度 */
  overflow-x: auto; /* 显示滚动条 */
  overflow-y: auto; /* 显示滚动条 */
  display: block;
  /* 水平滚动条 */
  /* 垂直滚动条 */
}

.scrollable-table--nodata {
  position: relative;
  box-shadow: inset 4px 4px 4px rgba(0, 0, 0, 0.2),
    /*左上角 颜色*/ 5px 7px 4px rgba(0, 0, 0, 0.07),
    /*右下 扩散*/ 5px 6px 6px rgba(0, 0, 0, 0.2),
    /*右下 颜色*/ inset -4px -4px 5px rgba(126, 134, 140, 0.9); /*rgba(84,94,100,.9)*/
  border-radius: 5px; /*右上， 左上， 左下， 右下*/
}
.scrollable-table--nodata:after {
  content: "NoData";
  position: absolute;
  bottom: 50%;
  left: 50%;
}

.scrollable-table::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background: transparent;
  border-radius: 4px;
}

.scrollable-table::-webkit-scrollbar-thumb:vertical {
  background: transparent;
  border-radius: 5px;
}
.scrollable-table::-webkit-scrollbar-thumb:horizontal {
  background: transparent;
  border-radius: 5px;
}
/*hover table*/
.scrollable-table--hover::-webkit-scrollbar-thumb:horizontal {
  background: #e0e0d4;
}

.scrollable-table--hover::-webkit-scrollbar-thumb:vertical {
  background: #e0e0d4;
}

.scrollable-table::-webkit-scrollbar-corner {
  background: transparent;
}

table {
  width: 100%;
  border-collapse: separate; /*collapse*/
  border-spacing: 10px 0;
}

th,
td {
  padding: 8px;
  text-align: left;
}

td {
  min-width: 100px;
  box-shadow: inset 4px 4px 4px rgba(0, 0, 0, 0.2),
    /*左上角 颜色*/ 5px 7px 4px rgba(0, 0, 0, 0.07),
    /*右下 扩散*/ 5px 6px 6px rgba(0, 0, 0, 0.2),
    /*右下 颜色*/ inset -4px -4px 5px rgba(126, 134, 140, 0.9); /*rgba(84,94,100,.9)*/
  border-radius: 10% 10% 10% 10%; /*右上， 左上， 左下， 右下*/
}

th {
  min-width: 100px;
  background-color: #ffbd44;
  box-shadow: inset 4px 4px 4px rgba(0, 0, 0, 0.2),
    /*左上角 颜色*/ 5px 7px 4px rgba(0, 0, 0, 0.07),
    /*右下 扩散*/ 5px 6px 6px rgba(0, 0, 0, 0.2),
    /*右下 颜色*/ inset -4px -4px 5px rgba(126, 134, 140, 0.9); /*rgba(84,94,100,.9)*/
  border-radius: 10% 10% 10% 10%; /*右上， 左上， 左下， 右下*/
  text-align: center;
}
</style>
